<template>
  <div class="home">
    <div>
      <el-input
        v-model="queryForm.sku"
        clearable
        placeholder="sku"
        style="width: 200px"
        prefix-icon="el-icon-search"
      ></el-input>
      <el-button type="primary" :disabled="!queryForm.sku" @click="getData">{{
        $t("form.queryBtn")
      }}</el-button>
    </div>
    <div>
      <div class="table-container">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="产品名称" align="center">
          </el-table-column>
          <el-table-column prop="value" label="数量" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="bar-chart" ref="barChartRef">请输入Sku进行查询</div>
    </div>
    <div>
      <el-input
        v-model="queryForm.shopname"
        clearable
        style="width: 200px"
        :placeholder="$t('query.dpm')"
        prefix-icon="el-icon-search"
      ></el-input>

      <el-button
        type="primary"
        :disabled="!queryForm.shopname"
        @click="getDay7Data"
        >{{ $t("form.queryBtn") }}</el-button
      >
    </div>
    <div ref="lineChartRef" class="line-chart">请输入店铺名进行查询</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import { IndexSelectApi, ShopShowApi } from "@/api";
export default {
  name: "home",
  data() {
    return {
      queryForm: {
        // sku: "CCL51",
        // shopname: "VENTABUENO",
        sku: "",
        shopname: "",
      },
      // tableData: [
      //   {
      //     date: "中国出库总数",
      //     value: 0,
      //   },
      //   {
      //     date: "海外入库总数",
      //     value: 0,
      //   },
      //   {
      //     date: "海外出库总数",
      //     value: 0,
      //   },
      //   {
      //     date: "海外库存剩余",
      //     value: 0,
      //   },
      //   {
      //     date: "平台仓可售库存",
      //     value: 0,
      //   },
      // ],
      barCharts: null,
      lineCharts: null,
    };
  },
  computed: {
    tableData() {
      return [
        {
          date: this.$t("home.中国出库总数"),
          value: 0,
        },
        {
          date: this.$t("home.海外入库总数"),
          value: 0,
        },
        {
          date: this.$t("home.海外出库总数"),
          value: 0,
        },
        {
          date: this.$t("home.海外库存剩余"),
          value: 0,
        },
        {
          date: this.$t("home.平台仓可售库存"),
          value: 0,
        },
      ];
    },
  },
  methods: {
    async getData() {
      if (!this.queryForm.sku) {
        return;
      }
      const { Cn_Out, Item_data, Mx_In, Mx_Out, Mx_data } =
        await IndexSelectApi({
          sku: this.queryForm.sku,
        });
      const data = { Cn_Out, Mx_In, Mx_Out, Mx_data, Item_data };
      Object.keys(data).forEach((key, index) => {
        this.tableData[index].value = data[key];
      });
      const barCharts = {
        xAxisData: this.tableData.map((item) => item.date),
        data: this.tableData.map((item) => item.value || 0),
      };
      this.$nextTick(() => {
        this.renderBar(barCharts);
      });
    },
    async getDay7Data() {
      if (!this.queryForm.shopname) {
        return;
      }
      let { date, data, amount } = await ShopShowApi({
        shopname: this.queryForm.shopname,
      });
      date = date.map((item) => dayjs(item).format("YYYY/MM/DD"));
      this.renderLine({ date, data, amount });
    },
    renderBar({ xAxisData, data }) {
      this.barCharts = echarts.init(this.$refs.barChartRef);
      const option = {
        color: ["#409EFF"],
        grid: {
          top: 8,
          left: "3%",
          right: 10,
          bottom: 25,
          containLabel: true,
        },
        legend: {
          data: ["SKU"],
          bottom: "0%",
          itemWidth: 30,
          itemHeight: 15,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "SKU",
            data,
            type: "bar",
            barMaxWidth: 50,
            barMinWidth: 20,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      option && this.barCharts.setOption(option);
      window.addEventListener("resize", () => {
        this.barCharts.resize();
      });
    },
    renderLine({ date, data, amount }) {
      this.lineCharts = echarts.init(this.$refs.lineChartRef);
      const colors = ["#409EFF", "#409EFF"];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: 150,
          left: 30,
          bottom: 50,
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["销售", "数量"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: date,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "数量",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "销售",
            type: "bar",
            data: amount,
            barMaxWidth: 50,
            barMinWidth: 20,
          },
          {
            name: "数量",
            type: "line",
            yAxisIndex: 1,
            data,
          },
        ],
      };
      option && this.lineCharts.setOption(option);
      window.addEventListener("resize", () => {
        this.lineCharts.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped src="./home.scss"></style>
